import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import { setTime } from "../store/features/timerSlice";
import { asyncincrement } from "../store/features/counterSlice";

const Timer = () => {
    const dispatch = useDispatch();
    const time = useSelector((state) => state.timer.time);
    useEffect(() => {
        const timer = setInterval(() => {
            dispatch(setTime());
        }, 1000);
        return () => {
            clearInterval(timer);
        };
    }, []);
    return (
        <>
            <div className='alert alert-info'>当前时间为：{time}</div>
            <div
                className='btn btn-primary'
                onClick={() => dispatch(asyncincrement(3))}
            >
                异步增加
            </div>
        </>
    );
};

export default Timer;
